<template>
  <div class="home">
    <gltitle :is_mt="true" :is_notice="false" :is_back="true" :is_name="true" :title="title"></gltitle>

    <div class="container">
      <div style="margin-top: .22rem;">

        <div class="empty db" v-show="emptyShow">
          <div class="flexs">
            <van-empty
                class="custom-image"
                :image="require('../../assets/images/Group12.png')"
                :description="$t('page1.doc45') "
            />
          </div>
        </div>


        <van-pull-refresh v-model="refreshing" :success-text="$t('load.refreshed')"
                          @refresh="onRefresh(0)"
                          head-height="100"
                          v-if="!emptyShow"
        >


          <van-list
              v-model="loading"
              :finished="finished"

              :loading-text="$t('load.loading')"
              @load="onLoad"
              :immediate-check="check"
          >

            <ul class="list">
              <li v-for="(item,k) in datalist" :key="k" @click="ontab(item.userId,item.teamCount)">
                <div class="db head">
                  <div class="ico"><img v-lazy="item.avatar" alt=""></div>
                  <div class="flexs">
                    <div class="n">{{ item.account }}</div>
                    <!-- <div class="n1" v-show="item.activeTime">{{ $t('page4.doc25') }}</div> -->
                    <!--              <div class="n1" v-show="item.level != -1">{{ item.level }}-{{ $t('page4.doc53') }}</div>-->
                    <div class="s" v-show="item.activeTime">{{ item.activeTime }}</div>
                    <!-- <div class="s">{{ common.formatName(item.account,7,11) }}</div> -->
                    <!-- <div class="s">{{ common.headTail(item.account) }}</div> -->

                  </div>
                  <div class="str" v-if="item.partnerLevelName">
                    <div class="s">{{ $t('new.doc54') }}：</div>
                    <div class="s theme"><img :src="item.partnerLevelIcon" alt=""> {{ item.partnerLevelName }}</div>
                  </div>
                </div>
                <div class="bot">
                  <div class="info">
                    <div class="name">{{ $t('page.doc76') }}</div>
                    <div class="value">{{ item.teamCount }}</div>
                  </div>
                  <div class="info">
                    <div class="name">{{ $t('page4.doc52') }}</div>
                    <div class="value">{{ item.registerTime }}</div>
                  </div>
                </div>
              </li>
            </ul>

          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: this.$t('new.doc4'),
      datalist: [],

      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
      i: 0

    };
  },

  mounted() {

  },


  methods: {
    ontab(id, un) {
      if (un == 0) {
        return
      }
      this.i = this.i + 1;
      if (this.i > 2) {
        return;
      }
      this.userId = id
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.pageSize = 0
      this.totalPage = ""
      this.finished = false
      this.loading = true
      this.datalist = []
      this.emptyShow = false
      this.onLoad()
    },

    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = []
          this.refreshing = false;
        }
        this.getlist();
      }, 500)
    },
    onRefresh() {
      this.finished = false
      this.loading = true

      this.pageSize = 0
      this.totalPage = ""

      this.onLoad();
    },


    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true

        return;
      }

      this.$post(this.URL.income.teamList, {
        userId: this.userId,
        page: this.pageSize,
        pageSize: 10
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false
            this.emptyShow = true
            return
          }
          if (res.data.list.length == 0) {
            this.emptyShow = true
          }
          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;
        }
      });
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {}
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .head {
  background: transparent;
}

.home {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
}

.list {
  li {
    background: linear-gradient(135deg, #0e5135 0%, #0f332a 100%);
    padding: .32rem .28rem;
    border-radius: .24rem;
    margin-bottom: .32rem;
    &:last-child {
      border: 0;
    }

    .head {

      .ico {
        width: 12%;

        img {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 50%;
        }
      }

      .n {
        font-weight: 500;
        color: var(--COcolor3);
        line-height: .4rem;
      }

      .n1 {
        font-weight: 400;
        margin-top: .16rem;
      }

      .s, .time {
        font-size: .24rem;
        color: var(--COcolor1);
        line-height: .33rem;
        margin-top: .12rem;

        &.theme {
          margin-top: 0.12rem;
          color: #4272FF;
          font-size: .28rem;
          display: flex;
          line-height: .32rem;
          justify-content: flex-end;
          img{
            width: .36rem;
            height: .32rem;
            margin-right: .1rem;
          }
        }
      }

      .s2 {
        font-size: .26rem;
        // font-weight: 500;
        line-height: .4rem;

        span {
          color: var(--COcolor3);
        }
      }

      .str {
        width: 40%;
        text-align: right;
      }

      .flexs {
        width: 40%;
        padding: 0 .1rem;
      }
    }

    .bot {
      padding-top: .32rem;
      border-top: .02rem solid rgba(255, 255, 255, 0.08);
      margin-top: .32rem;
      line-height: 1.2;

      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &:nth-of-type(n+2) {
          margin-top: .24rem;
        }

        .name {
          color: #BDBDBD;
          font-size: .26rem;
        }

        .value {
          color: #FFF;
          font-size: .26rem;
        }
      }
    }
  }
}

</style>
